<template>
  <div class="contanier">
    <div class="write-reply" @click="showCommentInputMajor()">

      <div class="replyInput-div">
        <el-input class="replyInput" type="textarea" :rows="5" placeholder="请输入内容" v-model="majorComment"></el-input>
      </div>
      <div class="button-div">
        <el-button class="resetButton" round @click="reset">重置</el-button>
        <el-button type="primary" class="replyButton" round @click="commitMajorComment">确定</el-button>
      </div>
    </div>
    <div style="margin: 20px 0">
      <div style="margin: 10px 0;font-size: 24px;padding: 10px 0;border-bottom: 1px solid #ccc;text-align: left;">评论列表
      </div>
      <div style="margin: 20px 0; text-align: left">

        <!-- 主要评论 -->
        <div class="replyArea" v-for="item in commentList" :key="item.id" style="padding:20px">
          <div style="display: flex">
            <div style="width: 80px">
              <el-avatar :size="50" :src=item.avatar></el-avatar>
            </div>
            <div style="flex: 1">
              <div class="name" style="color: #666 ;font-size: 10px;">
                {{ item.nickname }}
                <span style="margin-left: 10px">{{ item.createTime }}</span>
              </div>
              <div class="content" style="margin-top: 10px; ">{{ item.content }}</div>
              <div style="font-size: 10px;">
                <i class="fa fa-commenting-o" aria-hidden="true"></i>
                <span style="margin-left: 10px">
                  <el-button type="text" @click="showReplyInput(item, item)">回复</el-button>
                </span>
                <span style="margin-left: 20px">
                  <el-button type="text" @click="likeClick(item)">
                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                  </el-button>
                </span>
                <span style="margin-left: 10px">{{ item.likeCount }}</span>
                <span style="margin-left: 20px">
                  <el-button type="text" @click="unLikeClick(item)">
                    <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
                  </el-button>
                </span>
                <span style="margin-left: 10px">{{ item.dislikeCount }}</span>
              </div>

              <!-- 子评论区 -->
              <div class="replyChildren" v-for="reply in item.replyComments" :key="reply.id" style="padding:10px">

                <div style="display: flex">
                  <div style="width: 80px">
                    <el-avatar :size="50" :src=reply.avatar></el-avatar>
                  </div>
                  <div style="flex: 1">
                    <div class="name" style="color: #666;font-size: 10px;">
                      {{ reply.nickname }}
                      <span style="margin-left: 10px">{{ reply.createTime }}</span>
                    </div>
                    <div class="content" style="margin-top: 10px; ">{{ reply.content }}</div>
                    <div style="font-size: 10px">
                      <i class="fa fa-commenting-o" aria-hidden="true"></i>
                      <span style="margin-left: 10px">
                        <el-button type="text" @click="showReplyInput(item, reply)">回复</el-button>
                      </span>
                      <span style="margin-left: 20px">
                        <el-button type="text" @click="likeClick(reply)">
                          <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                        </el-button>
                      </span>
                      <span style="margin-left: 10px">{{ reply.likeCount }}</span>
                      <span style="margin-left: 20px">
                        <el-button type="text" @click="unLikeClick(reply)">
                          <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
                        </el-button>
                      </span>
                      <span style="margin-left: 10px">{{ reply.dislikeCount }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <transition name="fade">
                <div style="display: flex; margin-left: 10px; margin-top:10px" v-if="item.id == showCommentInputId">
                  <div style="width:100px;">
                    <el-avatar :size="50"
                      :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
                  </div>
                  <!-- 显示输入框 -->
                  <div>
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="childComment"></el-input>
                    <el-button type="primary" @click="commitChildComment(item)" round
                      style="float: right;margin-top:10px">确定</el-button>
                  </div>
                </div>
              </transition>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  created() {
    // console.log(this.courseNumber)
    this.getCommentList(this.courseNumber)
    this.getSomeUserInfo()
  },
  props: {
    courseNumber: Number,
  },




  data() {
    return {
      username: "",
      userId: 0,
      avatar: "",

      majorComment: "",
      childComment: "",
      inputComment: "",
      inputLabel: "",
      
      //要回复的id
      replyCommentId:0,

      showCommentInputId: 0,
      commentList: [
      ],
    };
  },
  methods: {
    showReplyInput(item, reply) {
      this.showCommentInputId = item.id;
      this.replyCommentId = reply.id
    },
    getCommentList(number) {
      this.$axios.get("http://localhost:8000/comment/findByCourseNumber/" + number, {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      })
        .then(res => {
          // console.log(res.data)
          this.commentList = res.data;
        })
        .catch(err => {
          console.error(err)
        })
    },

    //分割一下
    formatDate(date) {
      return moment(date).format("yyyy-MM-dd hh:mm");
    },
    showCommentInputMajor() {
      this.inputLabel = "";
      this.parentId = "0";
      this.replyUserId = "";
    },
    reset() {
      this.inputComment = "";
      this.majorComment = "";
    },
    getSomeUserInfo() {
      this.$axios.get("http://localhost:8000/getUserInfo", {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      })
        .then(res => {
          // console.log(res.data)
          this.userId = res.data.id
          this.username = res.data.username;
          this.avatar = res.data.avatar;
          console.log(this.username)
        })
        .catch(err => {
          console.log(err)
          this.$message.error(err.response.data.message)
        })
    },

    //userId需要获取！！
    commitMajorComment() {
      if(this.majorComment==""){
        this.$message.error("请输入评论内容")
        return 
      }
      let jsPointer = this;
      this.$axios({
        method: "post",
        url: "http://localhost:8000/comment/saveComment",
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        },
        data: {
          parentCommentId: -1,
          content: this.majorComment,
          courseNumber: this.courseNumber,
          courseCommentId: -1,
          userId: this.userId,
          nickname: this.username,
          avatar: "https://ts1.cn.mm.bing.net/th/id/R-C.62e6cbc443933db1c7ce4cf38ea54914?rik=Iues88I81wDaug&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2017080703%2f5x5jlkfn50c.jpg&ehk=M1jdKBcU4gJVRKcyA2W5TaHpfF5HcwX20I6%2f1C3hn5Y%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
        }
      }).then((res) => {
        console.log(res);
        jsPointer.getCommentList(jsPointer.courseNumber)
        this.$message.success("发送评论成功！")
      }).catch(err => {
        this.$message.error(err.data.message)
      })
      this.majorComment = ""
    },
    commitChildComment(item){
      if(this.childComment==""){
        this.$message.error("请输入评论内容")
        return 
      }
      let jsPointer = this;
      this.$axios({
        method: "post",
        url: "http://localhost:8000/comment/saveComment",
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        },
        data: {
          parentCommentId: this.replyCommentId,
          content: this.childComment,
          courseNumber: this.courseNumber,
          courseCommentId: item.id,
          userId: this.userId,
          nickname: this.username,
          avatar: "https://ts1.cn.mm.bing.net/th/id/R-C.62e6cbc443933db1c7ce4cf38ea54914?rik=Iues88I81wDaug&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2017080703%2f5x5jlkfn50c.jpg&ehk=M1jdKBcU4gJVRKcyA2W5TaHpfF5HcwX20I6%2f1C3hn5Y%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
        }
      }).then((res) => {
        console.log(res);
        jsPointer.getCommentList(jsPointer.courseNumber)
        this.$message.success("发送评论成功！")
      }).catch(err => {
        this.$message.error(err.data.message)
      })
      this.childComment = ""
    },
    likeClick(item) {
      let jsPointer = this;
      this.$axios({
        method: "put",
        url: "http://localhost:8000/comment/like",
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        },
        params: {
          userId:this.userId,
          commentId:item.id
        }
      }).then((res) => {
        console.log(res);
        jsPointer.getCommentList(jsPointer.courseNumber)
      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.message)
      })
    },
    unLikeClick(item){
      let jsPointer = this;
      this.$axios({
        method: "put",
        url: "http://localhost:8000/comment/dislike",
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        },
        params: {
          userId:this.userId,
          commentId:item.id
        }
      }).then((res) => {
        console.log(res);
        jsPointer.getCommentList(jsPointer.courseNumber)
      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.message)
      })
    }


  },
};
</script>




<style lang="scss">
.replyInput-div {
  display: flex;

}

.replyInput {
  width: 660px;
  font-size: 15px;
}

.button-div {
  margin-top: 10px;
}

.resetButton {
  position: relative;
  right: 50px;
}

.replyButton {
  position: relative;
  right: 15px;
}
</style>